<template>
	<div>
		<div class="nav_box">
			<div class="nav_inner">
				<router-link to="/layout/wode">
					<img src="../../assets/smallIcon/return.png"  alt="">
				</router-link>
				<Search />
			</div>
		</div>
		<div class="headline">
			<div class="praise">
				赞
				<div class="line"></div>
			</div>
			<div class="title">文章</div>
			<div class="video">
				<router-link to="/layout/praise_video">视频</router-link>
			</div>
		</div>
		<div class="time_machine">
			<div class="info">
				<div class="icon">
					<img src="../../assets/personIcon/wozanguode_01.png" alt="">
				</div>
				<div class="uname">
					<p>时光机</p>
					<p>10分钟前  来自  路上  lushang.com</p>
				</div>
				<div class="btn">
					<img src="../../assets/smallIcon/follow_FX.png" alt="">
				</div>
			</div>
			<div class="text">
				张家界的三千奇峰，张家界景色很美，门票有点贵，火车站建得太小气了，不过
				森林公园太赞了，它美妙得展现了大自然的美丽，雄伟的山峰直插云霄。森林公园
				里环境优美，空气很清新，是真正的大自然风光...
			</div>
		</div>
		<div class="shuju">
				<div class="share">
					<img src="../../assets/smallIcon/share.png" alt="">
					<span>1万</span>
				</div>
				<div class="comment">
					<img src="../../assets/smallIcon/infromation.png" alt="">
					<span>4754</span>
				</div>
				<div class="zan">
					<img src="../../assets/smallIcon/Fabulous.png" alt="">
					<span>5万</span>
				</div>
		</div>
			<!-- 不二莫斯 -->
		<div class="time_machine">
			<div class="info">
				<div class="icon">
					<img src="../../assets/personIcon/wozanguode_02.png" alt="">
				</div>
				<div class="uname">
					<p>不二摩斯</p>
					<p>5小时前  来自  路上  lushang.com</p>
				</div>	
			</div>
			<div class="text">
				哈哈哈，西安三日游，真的很开心！
			</div>
			<div class="picture">
				<img src="../../assets/landscape/wozanguode_01.png" alt="">
				<img src="../../assets/landscape/wozanguode_02.png" alt="">
				<img src="../../assets/landscape/wozanguode_03.png" alt="">
			</div>
		</div>
		<div class="shuju">
				<div class="share">
					<img src="../../assets/smallIcon/share.png" alt="">
					<span>1万</span>
				</div>
				<div class="comment">
					<img src="../../assets/smallIcon/infromation.png" alt="">
					<span>4754</span>
				</div>
				<div class="zan">
					<img src="../../assets/smallIcon/Fabulous.png" alt="">
					<span>5万</span>
				</div>
		</div>
	<!-- 南风过境 -->
	<div class="time_machine">
			<div class="info">
				<div class="icon">
					<img src="../../assets/personIcon/wozanguode_03.png" alt="">
				</div>
				<div class="uname">
					<p>南风过境</p>
					<p>1小时前  来自  路上  lushang.com</p>
				</div>
				<div class="btn">
					<img src="../../assets/smallIcon/follow_FX.png" alt="">
				</div>
			</div>
			<div class="text">
				当你去到过很多地方，见到过很多美景，经历过很多人和事，你就会逐渐
				明白，很多东西，虽然美、虽然你喜欢，却是你带不走的、是不属于你的。
				想通了这一点，你也就变得淡然和豁达了...
			</div>
		</div>
		<div class="shuju">
				<div class="share">
					<img src="../../assets/smallIcon/share.png" alt="">
					<span>1万</span>
				</div>
				<div class="comment">
					<img src="../../assets/smallIcon/infromation.png" alt="">
					<span>4754</span>
				</div>
				<div class="zan">
					<img src="../../assets/smallIcon/Fabulous.png" alt="">
					<span>5万</span>
				</div>
		</div>
	</div>
</template>

<script>
import Search from '../../components/search'
export default{
	name:"praise-main",
	data(){
		return{
		
		}
	},
	components:{
		Search
	}
}	

</script>
<style scoped lang="less">
    .nav_box{
		width: 100%;
		height: 94 /50rem;
		background-color: #7dd19d;
		overflow: hidden;
		position: fixed;
		top:0;
		left:0;
		right:0;
		z-index: 666;
		.nav_inner{
			width:710 /50rem;
			height: 100%;
			margin-left: 24 /50rem;	
			img{
				margin-top: 28 /50rem;
				width: 22 /50rem;
				height: 40 /50rem;
				margin-right: 75 / 50rem;
				float: left;
			}
		}
	}
	.headline{
		width:100%;
		height:88 / 50rem;
		background-color: #ffffff;
		margin-top: 99 / 50rem;
		display: flex;
		text-align: center;
		line-height: 88 / 50rem;
	}
	.praise,.title,.video{
		flex:1;
	}
	.praise{
		color:#7dd19c;
		font-size: 36 / 50rem;
		
	}
	.praise .line{
		width:100 / 50rem;
		height:4 / 50rem;
		border-radius: 4 / 50rem;
		background-color: #5dade2;
		bottom: 10 / 50rem;
		position: relative;
		left:77 / 50rem;
	}
	.time_machine{
		background-color: #ffffff;
		margin-top: 20 / 50rem;
		overflow: hidden;
	}
	.info{
		overflow: hidden;
		margin:20 / 50rem;
	}
	.icon,.uname,.btn{
		float: left;
	}
	.icon img{
		width:80 / 50rem;
		height:80 / 50rem;
	}
	.uname{
		margin-left: 10 / 50rem;
		margin-top: 10 / 50rem;
	}
	.uname p:nth-child(1){
		font-size: 24 / 50rem;
	}
	.uname p:nth-child(2){
		margin-top: 10 / 50rem;
		font-size: 18 / 50rem;
	}
	.btn{
		position: absolute;
		right:20 / 50rem;
		font-size: 20 / 50rem;
		margin-top: 38 / 50rem;
	}
	.btn img{
		width:100 / 50rem;
		height:44 / 50rem;
	}
	.text{
		font-size: 26 / 50rem;
		line-height: 38 / 50rem;
		margin-left: 20 / 50rem;
		margin-right: 20 / 50rem;
		margin-bottom: 14 / 50rem;
		overflow: hidden;
	}
	.shuju span{
		font-size: 20 / 50rem;
		position: relative;
	    top: -7 / 50rem;
	    left:20 / 50rem;
	}
	.shuju{
		overflow: hidden;
		background-color: #ffffff;
		margin-top: 1 / 50rem;
		text-align: center;
		padding: 22 / 50rem 80 / 50rem;
	}
	.share,.comment,.zan{
		float: left;
	}
	.share img{
		width:31 / 50rem;
		height:33 / 50rem;
		margin-left: 5 / 50rem;
		
	}
	.comment img{
		width:32 / 50rem;
		height:32 / 50rem;
		margin-left: 125 / 50rem;
		margin-top: 5 / 50rem;
	}
	.zan img{
		width:40 / 50rem;
		height:40 / 50rem;
		margin-left: 150 / 50rem;
	}
	//不二摩斯
	.picture{
		margin-left: 20 / 50rem;
		margin-right: 20 / 50rem;
		margin-bottom: 14 / 50rem;
	}
	.picture img{
		width:230 / 50rem;
		height:230 / 50rem;
	}
	
	
	
	

</style>